var inputs = document.querySelectorAll(".input-wrapper input");
// 为了添加验证事件单独选择email元素
var phoneno = document.getElementById("phoneno");
var password = document.getElementById("password");
var email = document.getElementById("email");
var submit = document.getElementById("submit");

function bindEvent(){
    inputs.forEach(function (ele){
        on(ele, "focus", showTip);
        on(ele, "blur", hideTip);
    });
    // 手机号验证
    on(phoneno, "blur", validatePhone);

    // 密码框失去焦点，进行密码验证
    on(password, "blur", validatePassword);
    on( password , "input", passwordStrength ) ;

    // 邮箱验证
    on( email , "blur" , validateEmail )

    on( submit , "click" , validateSubmit)
    console.log(submit);
    console.log(email);

}
function showTip(e){
    this.validate = false;
    var tip = this.nextElementSibling
    tip.style.display = "block";
    tip.innerHTML = tip.getAttribute("data-tip");
    tip.classList.remove("error", "warning");

}
 // 隐藏提示内容; 
 function hideTip( e ){
    var tip = this.nextElementSibling
    tip.style.display = "none";
}

function validatePhone(){
    var phone_value=phoneno.value;
      if(phone_value === ""){
        return tipError( phoneno , "请输入手机号");

      }
//     if(!(/^1[345678]\d{9}&/.test(phone_value))){
//         return tipError( phoneno , "手机号不正确");
//     }
//     console.log(3);
    var phone_reg=/^1(3|4|5|7|8)\d{9}$/;
    if( !phone_reg.test(phone_value)){
      return tipError( phoneno , "手机号不符合规则");
 }
    phoneno.validate = true;

}
function validateEmail(){
      // 1. email字符串; 
      var email_value = email.value;

      // 2. email规则表达式; 
      // - 字母开头规则: 
      if(!(/^[a-zA-Z]/.test( email_value ))){
            // 如果不是字母开头 ; 
            return tipError( email , "邮箱名必须以字母开头");
      }
      // - 位数验证; 

      if(!(/^.{6,18}(?=@).+$/.test(email_value))){
            return tipError( email , "邮箱必须由6~18位字符组成")
      }
      // - 规则验证
      var email_reg = /^\w{6,18}@[a-zA-Z]{2,20}\.(com|net)$/
      if( !email_reg.test( email_value )){
           return tipError( email , "不符合邮箱规则");
      }

      // 如果可以走到最后一行则表示验证通过; 
      email.validate = true;
}     
function tipError( ele , msg , type){
    type = type || "error"
    var tip = ele.nextElementSibling;
    tip.innerHTML = msg;
    tip.style.display = "block";
    tip.classList.add( type );
//     console.log(3218);
}
function validatePassword(){
    var pwd_value = password.value;
    // 验证密码位数 : 
    if( !(/^.{8,20}$/.test( pwd_value) ) ){
          return tipError( password , "密码位数应为8~20位");
    }

    switch( passwordStrength() ){
          case 2 : 
          case 3 : 
                password.validate = true;
    }
}
function passwordStrength(){
    var pwd_value = password.value;

    var strength = 0 ; 

    if( /\d/.test(pwd_value)){
          strength ++;
    }
    if( /[a-zA-Z]/.test(pwd_value)){
          strength ++;
    }
    if( /[\!\@\#\$\%\&\*\)\+]/.test(pwd_value)){
          strength ++;
    }
    // 根据密码强度可以计算出相应的提示信息; 

    // 升级tipError

    switch( strength ){
          case 1 : 
                tipError( password , "密码强度过低"); 
                break;
          case 2 : 
                tipError( password , "密码强度中等" , "warning");
                break;
          case 3 :    
                password.nextElementSibling.style.display = "none";
                break;
    }

    return strength;
}
// function validateSubmit( e ){
// //     console.log("4");
//     e = e || event;

//     for(var i = 0 ; i < inputs.length ; i ++){
//           if( inputs[i].getAttribute("g-required") !== null && !inputs[i].validate){
//                 // 验证当前元素 
//                 inputs[i].focus();
//                 return e.preventDefault();
//           }
//     }
// }


bindEvent();

